<template>
  <section>
    <div class="custorm--modelbox graphicsubline-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
      <section v-if="nrActive">
        <div class="edit-form-item">
          <div class="form-label">线条样式</div>
          <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">颜色</span>
            <el-color-picker class="ivu-input" v-model="custormItemData.style.color" size="mini"></el-color-picker>
            <span class="ivu-input">{{custormItemData.style.color}}</span>
          </div>
          <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">背景</span>
            <el-color-picker class="ivu-input" v-model="custormItemData.style.bgcolor" size="mini"></el-color-picker>
            <span class="ivu-input">{{custormItemData.style.bgcolor}}</span>
          </div>
          <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">风格</span>
            <el-radio-group v-model="custormItemData.style.display">
              <el-radio label="1">实线</el-radio>
              <el-radio label="2">点状</el-radio>
              <el-radio label="3">虚线</el-radio>
            </el-radio-group>
          </div>
          <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">高度</span>
            <el-slider :show-tooltip="false" style="width: 70%;" v-model="height" input-size="mini" :min="1" :max="40">
            </el-slider>
            <div class="coupon-showslider">{{custormItemData.style.height}}px</div>
          </div>
        </div>
        <div class="edit-form-item">
          <div class="form-label">上下边距</div>
          <div class="flex-row flex-align-c">
            <el-slider :show-tooltip="false" style="width: 70%;" v-model="margincol" input-size="mini" :max="48">
            </el-slider>
            <div class="coupon-showslider">{{custormItemData.style.margincol}}px</div>
          </div>
        </div>

        <div class="edit-form-item">
          <div class="form-label">左右边距</div>
          <div class="flex-row flex-align-c">
            <el-slider :show-tooltip="false" style="width: 70%;" v-model="marginrow" input-size="mini" :max="48">
            </el-slider>
            <div class="coupon-showslider">{{custormItemData.style.marginrow}}px</div>
          </div>
        </div>
      </section>
      <!-- <section v-if="fgActive">
        <div class="es-form-item">
          <div class="item-inner block"><label
              class="button-img block"
              @click="changePattern(1)"
              v-bind:class="{active:custormItemData.style.display==1}"
            ><input
                type="radio"
                value="solid"
                class="opacity-0"
              >
              <div style="border: 0.5px solid rgb(0, 0, 0); margin-top: 4px;"></div>
            </label></div>
          <div class="item-inner block alignC">
            风格一
          </div>
          <div class="item-inner block"><label
              class="button-img block"
              @click="changePattern(2)"
              v-bind:class="{active:custormItemData.style.display==2}"
            ><input
                type="radio"
                value="dotted"
                class="opacity-0"
              >
              <div style="border: 0.5px dotted rgb(0, 0, 0); margin-top: 4px;"></div>
            </label></div>
          <div class="item-inner block alignC">
            风格二
          </div>
          <div class="item-inner block "><label
              class="button-img block"
              @click="changePattern(3)"
              v-bind:class="{active:custormItemData.style.display==3}"
            ><input
                type="radio"
                value="dashed"
                class="opacity-0"
              >
              <div style="border: 0.5px dashed rgb(0, 0, 0); margin-top: 4px;"></div>
            </label></div>
          <div class="item-inner block alignC">
            风格三
          </div>
        </div>
      </section> -->
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  computed: {
    height: {
      set(value) {
        this.custormItemData.style.height = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.height)
      }
    },
    margincol: {
      set(value) {
        this.custormItemData.style.margincol = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.margincol)
      }
    },
    marginrow: {
      set(value) {
        this.custormItemData.style.marginrow = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.marginrow)
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicsubline-edit {
  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;
  }

  .es-form-item:last-child {
    border-bottom: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .es-form-item .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .es-form-item .button-img.active {
    border-color: #fb6638 !important;
  }

  .es-form-item [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .es-form-item .opacity-0 {
    opacity: 0;
  }

  .es-form-item .button-img .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .alignC {
    text-align: center;
  }
}
</style>
